const myBehavior = require('../behavior/behavior.js')
// components/test.js
Component({
  behaviors: [myBehavior],
  /**
   * 样式隔离
   * isolated 组件样式隔离
   * apply-shared 外部可以影响组件内部
   * shared 相互影响
   * 
   * 纯数据字段
   * pureDataPattern: /^_/
   */
  options: {
    styleIsolation: "isolated",
    pureDataPattern: /^_/
  },
  /**
   * 组件生命周期
   */
  lifetimes: {
    created() {
      // 可以增加属性
    },
    attached() {
      // 可以访问数据,并可以更改
    },
    actived() {
      // dom渲染
    },
    moved() {

    },
    detached() {
      // 销毁
    }
  },
  /**
   * 组件所在页面的生命周期函数   
   */
  pageLifetimes: {
    show() {

    },
    hide() {

    },
    resize(size) {

    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    max: {
      type: "Number",
      value: 10
    },
    count: {
      type: "Number",
      value: 10
    },
    max: Number
  },

  /**
   * 组件的初始数据
   */
  data: {
    count: 0,
    n1: 1,
    n2: 1,
    sum: 0,
    colorList: '0,0,0',
    _color: {
      r: 0,
      g: 0,
      b: 0
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    countAdd() {
      this.setData({
        count: this.data.count + 1
      })
      this.triggerEvent("sync", this.data.count)
    },
    b(e) {
      console.log(e);
      switch (e.currentTarget.dataset.info) {
        case "r":
          console.log("r");
          this.setData({
            "_color.r": this.data._color.r > 255 ? 255 : this.data._color.r + 10
          });
          break;
        case "g":
          console.log("g");
          this.setData({
            "_color.g": this.data._color.g > 255 ? 255 : this.data._color.g + 10
          });
          break;
        case "b":
          console.log("b");
          this.setData({
            "_color.b": this.data._color.b > 255 ? '255' : this.data._color.b + 10
          });
          break;

      }
    },
    b1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    b2() {
      // console.log(this)
      this.setData({
        n2: this.data.n2 + 1
      })
    }
  },
  /**
   * 监听数据
   */
  observers: {
    'n1,n2': function (n1, n2) {
      console.log(this)
      this.setData({
        sum: n1 + n2
      })
    },
    // '_color.r,_color.g,_color.b': function (r, g, b) {
    //   this.setData({
    //     colorList: r + "," + g + "," + b
    //   })
    // },
    '_color.**': function (obj) {
      this.setData({
        colorList: obj.r + "," + obj.g + "," + obj.b
      })
    }
  }
})